<template>
 <div>
   <div class="container">
     <el-form ref="form" :model="form" style="width:100%" >
        <el-form-item v-for="(item,index ) in tabdata" :key="index" >
          <span>教室名称：</span>
          <el-input v-model='item.name' style="width:35%" ref="name" :data-id= "item.id?item.id:''"></el-input>
          <span>教室地址：</span>
          <el-input v-model="item.address" style="width:35%" ref = "address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-if="this.tabdata[0].id" @click="onCreateSubmit">立即保存</el-button>
          <el-button type="primary" v-else @click="onSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>
   </div>
 </div>
</template>
<script>
export default {
  data() {
    return {
      tabdata:[],
      tabdataTwo:[],
      form: {
        name: "",
        address: ""
      },
      change:[] , 
    };
  },
  beforeMount() {
		this.bankAccount();
  },
  methods: {
    classRoomAdd(index){
      this.change.push({
        id:this.tabdata[index].id,
        name:this.tabdata[index].name,
        address:this.tabdata[index].address,
        index:index
      })
      console.log(this.change)
    },
    // 获取机构教室信息
    bankAccount(){
      let organizationId = JSON.parse(localStorage.getItem("organizationIds"))[0];
      this.$axios({
        method: "post",
        url: "/api/user/xzs/classroom.list.get",
        data: {
          organizationId:organizationId,
        },
        transformRequest: [
          function(data) {
            let ret = "";
            for (let it in data) {
              ret += encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&";
            }
            return ret;
          }
        ],
      }).then(res => {
        console.log(res)
        this.tabdata = res.data.data
        if(this.tabdata.length<5){
          const a = 5 - this.tabdata.length;
          for(let i = 0 ;i < a;i++){
            this.tabdata.push({
              name:"",
              address:""
            })
          }
        }
        console.log(this.tabdata);
        
        }).catch(err => {

        });
    },
    // 添加教室
    onSubmit() {   
      var that = this;
      let organizationId = JSON.parse(localStorage.getItem("organizationIds"))[0];
      this.$axios({
        method: "post",
        url: "/api/user/xzs/classrooms.add",
        data: {
          classroomInfos: that.tabdataTwo,
          organizationId:organizationId
        }
      }).then(res => {
        console.log(res);
          if(res.data.errorCode == '0'){
            this.$message({
              showClose: true,
              message: "添加成功",
              type: "success"
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 更新教室
    onCreateSubmit(){
      var that = this;
       var arr = []
       console.log()
       for(let i = 0 ;i  < this.$refs.name.length;i++){
          // if(this.$refs.name[i].$refs.input.value != "" && this.$refs.address[i].$refs.input.value != ""){
            
          // }
            arr.push({
              name:this.$refs.name[i].$refs.input.value,
              id:this.$refs.name[i].$refs.input.dataset.id,
              address:this.$refs.address[i].$refs.input.value
            })
            console.log(this.$refs.name[i].$refs.input.dataset.id);
            console.log(this.$refs.address[i].$refs.input.value);
       }
       that.change = arr
      // for( let i = 0 ;i <this.change.length-1;i++){
      //   for(let j = i+1; j < i; j++){
      //     if(this.change[i].index == this.change[j].index){
      //       arr.push(this.change[i])
      //     }
      //   } 
      // }
      // console.log(arr)
      let organizationId = JSON.parse(localStorage.getItem("organizationIds"))[0];
      console.log(arr);
      
      this.$axios({
        method: "post",
        url: "/api/user/xzs/classrooms.update",
        data: {
          data:"",
          classroomInfos: arr,
          organizationId : organizationId
        }
      }).then(res => {
          if(res.data.errorCode == '0'){
            this.$message({
              showClose: true,
              message: "修改成功",
              type: "success"
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
  },
  components: {}
};
</script>

<style>

</style>
